<template>
  <div id='wrap'>
    <h1>状态管理pinia</h1>
    <p>{{ `${counterStore1.count},${counterStore1.name},${counterStore1.isAdmin},${counterStore1.items},${counterStore1.hasChanged}` }}</p>
    <p>Count状态:{{ counterStore1.count }}</p>
    <p>name状态:{{ counterStore1.name }}</p>
    <p>doubleCount派生:{{ counterStore1.doubleCount }}</p>
    <p>doublePlusone派生:{{ counterStore1.doublePlusone }}</p>
    <button @click="counterStore1.increment">increment方法</button>
    <button @click="counterStore1.$reset">reset</button>
    <button @click="counterStore1.reset">reset1</button>
    <button @click="counterStore1.$patch({count:10,name:'jion'})">修改state的count和name</button>
    <button @click="counterStore1.$state={count:10,name:'jion',isAdmin:false,items:[],hasChanged:false}">替换state的内容</button>
    <hr>
    <p>{{ `${counterStore2.count},${counterStore2.name},${counterStore2.isAdmin}` }}</p>
    <p>Count状态:{{ counterStore2.count }}</p>
    <p>name状态:{{ counterStore2.name }}</p>
    <p>isAdmin状态:{{ counterStore2.isAdmin }}</p>
    <button @click="counterStore2.increment">increment方法</button>
    <button @click="counterStore2.reset">reset</button>
    <button @click="counterStore2.$patch({count:10,name:'jion'})">修改state的count和name</button>
    <button @click="counterStore2.$state={count:100,name:'family',isAdmin:false}">替换state的内容</button>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu40',
}
</script>

<script lang='ts' setup>
import { useStoreOne,useStoreTwo } from "@/stores/index";
const counterStore1=useStoreOne()
const counterStore2=useStoreTwo()
const {count,doubleCount,increment}=useStoreOne()
console.log(count,doubleCount,increment);
//组合式不能解构
// const {count2,doubleCount2,increment2}=useStoreTwo()
// console.log(count2,doubleCount2,increment2);

</script>

<style scoped lang='scss'>

</style>
